<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Adminox - Responsive Web App Kit</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
  <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"> 
  <meta content="Coderthemes" name="author"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <!-- App favicon --> 
  <link rel="shortcut icon" href="assets/images/favicon.ico"> 
  <!-- Plugins css--> 
  <link href="../plugins/bootstrap-tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet"> 
  <link href="../plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet"> 
  <link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"> 
  <link href="../plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet"> 
  <link rel="stylesheet" href="../plugins/switchery/switchery.min.css"> 
  <!-- App css --> 
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css"> 
  <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
  <script src="assets/js/modernizr.min.js"></script> 
 </head> 
 <body> 
  <!-- Begin page --> 
  <div id="wrapper"> 
   <!-- Top Bar Start --> 
   <div class="topbar"> 
    <!-- LOGO --> 
    <div class="topbar-left"> 
     <a href="index1.html" class="logo"> <span> <img src="assets/images/logo.png" alt="" height="25"> </span> <i> <img src="assets/images/logo_sm.png" alt="" height="28"> </i> </a>
    </div> 
    <nav class="navbar-custom"> 
     <ul class="list-inline float-right mb-0"> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="dripicons-bell noti-icon"></i> <span class="badge badge-pink noti-icon-badge">4</span> </a> 
       <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg" aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5><span class="badge badge-danger float-right">5</span>Notification</h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-success">
          <i class="icon-bubble"></i>
         </div> <p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-info">
          <i class="icon-user"></i>
         </div> <p class="notify-details">New user registered.<small class="text-muted">1 min ago</small></p> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> 
         <div class="notify-icon bg-danger">
          <i class="icon-like"></i>
         </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">1 min ago</small></p> </a> 
        <!-- All--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item notify-all"> View All </a> 
       </div> </li> 
      <li class="list-inline-item dropdown notification-list"> <a class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> </a> 
       <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview"> 
        <!-- item--> 
        <div class="dropdown-item noti-title"> 
         <h5 class="text-overflow"><small>Welcome ! John</small> </h5> 
        </div> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-account-circle"></i> <span>Profile</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-settings"></i> <span>Settings</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-lock-open"></i> <span>Lock Screen</span> </a> 
        <!-- item--> 
        <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="zmdi zmdi-power"></i> <span>Logout</span> </a> 
       </div> </li> 
     </ul> 
     <ul class="list-inline menu-left mb-0"> 
      <li class="float-left"> <button class="button-menu-mobile open-left waves-light waves-effect"> <i class="dripicons-menu"></i> </button> </li> 
      <li class="hide-phone app-search"> 
       <form role="search" class=""> 
        <input type="text" placeholder="Search..." class="form-control"> 
        <a href=""><i class="fa fa-search"></i></a> 
       </form> </li> 
     </ul> 
    </nav> 
   </div> 
   <!-- Top Bar End --> 
   <!-- ========== Left Sidebar Start ========== --> 
   <div class="left side-menu"> 
    <div class="slimscroll-menu" id="remove-scroll"> 
     <!-- Sidemenu --> 
     <div id="sidebar-menu"> 
      <!-- Left Menu Start --> 
      <ul class="metismenu" id="side-menu"> 
       <li class="menu-title">Navigation</li> 
       <li> <a href="javascript: void(0);"> <i class="fi-air-play"></i><span class="badge badge-success pull-right">2</span> <span> Dashboard </span> </a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="index1.html">Dashboard 1</a></li>
         <li><a href="dashboard-2.html">Dashboard 2</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-target"></i> <span> Admin UI </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="admin-grid.html">Grid</a></li> 
         <li><a href="admin-sweet-alert.html">Sweet Alert</a></li> 
         <li><a href="admin-tiles.html">Tiles Box</a></li> 
         <li><a href="admin-nestable.html">Nestable List</a></li> 
         <li><a href="admin-rangeslider.html">Range Slider</a></li> 
         <li><a href="admin-ratings.html">Ratings</a></li> 
         <li><a href="admin-filemanager.html">File Manager</a></li> 
         <li><a href="admin-lightbox.html">Lightbox</a></li> 
         <li><a href="admin-scrollbar.html">Scroll bar</a></li> 
         <li><a href="admin-slider.html">Slider</a></li> 
         <li><a href="admin-treeview.html">Treeview</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-briefcase"></i> <span> UI Kit </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="ui-typography.html">Typography</a></li> 
         <li><a href="ui-panels.html">Panels</a></li> 
         <li><a href="ui-buttons.html">Buttons</a></li> 
         <li><a href="ui-modals.html">Modals</a></li> 
         <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li> 
         <li><a href="ui-spinners.html">Spinners</a></li> 
         <li><a href="ui-ribbons.html">Ribbons</a></li> 
         <li><a href="ui-portlets.html">Portlets</a></li> 
         <li><a href="ui-tabs.html">Tabs</a></li> 
         <li><a href="ui-progressbars.html">Progress Bars</a></li> 
         <li><a href="ui-notifications.html">Notification</a></li> 
         <li><a href="ui-carousel.html">Carousel</a> </li>
         <li><a href="ui-video.html">Video</a> </li>
         <li><a href="ui-tooltips-popovers.html">Tooltips &amp; Popovers</a></li> 
         <li><a href="ui-images.html">Images</a></li> 
         <li><a href="ui-bootstrap.html">Bootstrap UI</a></li> 
        </ul> </li> 
       <li> <a href="tickets.html"><i class="fi-help"></i><span class="badge badge-danger pull-right">New</span> <span> Tickets </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-box"></i><span> Icons </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="icons-colored.html">Colored Icons</a></li> 
         <li><a href="icons-materialdesign.html">Material Design</a></li> 
         <li><a href="icons-dripicons.html">Dripicons</a></li> 
         <li><a href="icons-fontawesome.html">Font awesome</a></li> 
         <li><a href="icons-feather.html">Feather Icons</a></li> 
         <li><a href="icons-simple-line.html">Simple line Icons</a></li> 
         <li><a href="icons-flags.html">Flag Icons</a></li> 
         <li><a href="icons-file.html">File Icons</a></li> 
         <li><a href="icons-pe7.html">PE7 Icons</a></li> 
         <li><a href="icons-typicons.html">Typicons</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-bar-graph-2"></i><span> Graphs </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="chart-flot.html">Flot Chart</a></li> 
         <li><a href="chart-morris.html">Morris Chart</a></li> 
         <li><a href="chart-google.html">Google Chart</a></li> 
         <li><a href="chart-echart.html">Echarts</a></li> 
         <li><a href="chart-chartist.html">Chartist Charts</a></li> 
         <li><a href="chart-chartjs.html">Chartjs Chart</a></li> 
         <li><a href="chart-c3.html">C3 Chart</a></li> 
         <li><a href="chart-justgage.html">Justgage Charts</a></li> 
         <li><a href="chart-sparkline.html">Sparkline Chart</a></li> 
         <li><a href="chart-knob.html">Jquery Knob</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-mail"></i><span> Email </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="email-inbox.html">Inbox</a></li> 
         <li><a href="email-read.html">Read Email</a></li> 
         <li><a href="email-compose.html">Compose Email</a></li> 
        </ul> </li> 
       <li> <a href="taskboard.html"><i class="fi-paper"></i> <span> Task Board </span></a> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-disc"></i><span class="badge badge-warning pull-right">12</span> <span> Forms </span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="form-elements.html">Form Elements</a></li> 
         <li><a href="form-advanced.html">Form Advanced</a></li> 
         <li><a href="form-layouts.html">Form Layouts</a></li> 
         <li><a href="form-validation.html">Form Validation</a></li> 
         <li><a href="form-pickers.html">Form Pickers</a></li> 
         <li><a href="form-wizard.html">Form Wizard</a></li> 
         <li><a href="form-mask.html">Form Masks</a></li> 
         <li><a href="form-summernote.html">Summernote</a></li> 
         <li><a href="form-wysiwig.html">Wysiwig Editors</a></li> 
         <li><a href="form-typeahead.html">Typeahead</a></li> 
         <li><a href="form-x-editable.html">X Editable</a></li> 
         <li><a href="form-uploads.html">Multiple File Upload</a></li> 
        </ul> </li> 
       <li> <a href="javascript: void(0);"><i class="fi-layout"></i> <span> Tables </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="tables-basic.html">Basic Tables</a></li> 
         <li><a href="tables-layouts.html">Tables Layouts</a></li> 
         <li><a href="tables-datatable.html">Data Tables</a></li> 
         <li><a href="tables-foo-tables.html">Foo Tables</a></li> 
         <li><a href="tables-responsive.html">Responsive Table</a></li> 
         <li><a href="tables-tablesaw.html">Tablesaw Tables</a></li> 
         <li><a href="tables-editable.html">Editable Tables</a></li> 
        </ul> </li> 
       <li class="menu-title">More</li> 
       <li> <a href="javascript: void(0);"><i class="fi-map"></i> <span> Maps </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="maps-google.html">Google Maps</a></li> 
         <li><a href="maps-google-full.html">Full Google Map</a></li> 
         <li><a href="maps-vector.html">Vector Maps</a></li> 
         <li><a href="maps-mapael.html">Mapael Maps</a></li> 
        </ul> </li> 
       <li><a href="calendar.html"><i class="fi-clock"></i> <span>Calendar</span> </a></li> 
       <li> <a href="javascript: void(0);"><i class="fi-paper-stack"></i><span> Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="page-starter.html">Starter Page</a></li> 
         <li><a href="page-login.html">Login</a></li> 
         <li><a href="page-register.html">Register</a></li> 
         <li><a href="page-logout.html">Logout</a></li> 
         <li><a href="page-recoverpw.html">Recover Password</a></li> 
         <li><a href="page-lock-screen.html">Lock Screen</a></li> 
         <li><a href="page-confirm-mail.html">Confirm Mail</a></li> 
         <li><a href="page-404.html">Error 404</a></li> 
         <li><a href="page-404-alt.html">Error 404-alt</a></li> 
         <li><a href="page-500.html">Error 500</a></li> 
        </ul> </li> 
       <li class="has_sub"> <a href="javascript:void(0);"><i class="fi-marquee-plus"></i><span> Extra Pages </span> <span class="menu-arrow"></span></a> 
        <ul class="nav-second-level" aria-expanded="false"> 
         <li><a href="extras-about.html">About Us</a></li> 
         <li><a href="extras-contact.html">Contact</a></li> 
         <li><a href="extras-companies.html">Companies</a></li> 
         <li><a href="extras-members.html">Members</a></li> 
         <li><a href="extras-members-2.html">Membars 2</a></li> 
         <li><a href="extras-timeline.html">Timeline</a></li> 
         <li><a href="extras-invoice.html">Invoice</a></li> 
         <li><a href="extras-maintenance.html">Maintenance</a></li> 
         <li><a href="extras-coming-soon.html">Coming Soon</a></li> 
         <li><a href="extras-faq.html">FAQ</a></li> 
         <li><a href="extras-pricing.html">Pricing</a></li> 
         <li><a href="extras-profile.html">Profile</a></li> 
         <li><a href="extras-email-template.html">Email Templates</a></li> 
         <li><a href="extras-search-result.html">Search Results</a></li> 
         <li><a href="extras-sitemap.html">Site Map</a></li> 
        </ul> </li> 
       <li> <a href="todo.html"><i class="fi-layers"></i> <span> Todo </span></a> </li> 
      </ul> 
     </div> 
     <!-- Sidebar --> 
     <div class="clearfix"></div> 
    </div> 
    <!-- Sidebar -left --> 
   </div> 
   <!-- Left Sidebar End --> 
   <!-- ============================================================== --> 
   <!-- Start right Content here --> 
   <!-- ============================================================== --> 
   <div class="content-page"> 
    <!-- Start content --> 
    <div class="content"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-12"> 
        <div class="page-title-box"> 
         <h4 class="page-title float-left">Form Advanced</h4> 
         <ol class="breadcrumb float-right"> 
          <li class="breadcrumb-item"><a href="#">Adminox</a></li> 
          <li class="breadcrumb-item"><a href="#">Forms</a></li> 
          <li class="breadcrumb-item active">Form Advanced</li> 
         </ol> 
         <div class="clearfix"></div> 
        </div> 
       </div> 
      </div> 
      <!-- end row --> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-20">Select2</h4> 
         <p>Single Select</p> 
         <p class="text-muted m-b-15 font-14"> Select2 can take a regular select box like this... </p> 
         <select class="form-control select2"> <option>Select</option> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> 
         <p class="m-t-30">Multiple Select</p>
         <p> </p>
         <p class="text-muted m-b-15 font-14"> Select2 can take a regular select box like this... </p> 
         <select class="select2 form-control select2-multiple" multiple data-placeholder="Choose ..."> <optgroup label="Alaskan/Hawaiian Time Zone"> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> </optgroup> <optgroup label="Pacific Time Zone"> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </optgroup> <optgroup label="Mountain Time Zone"> <option value="AZ">Arizona</option> <option value="CO">Colorado</option> <option value="ID">Idaho</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NM">New Mexico</option> <option value="ND">North Dakota</option> <option value="UT">Utah</option> <option value="WY">Wyoming</option> </optgroup> <optgroup label="Central Time Zone"> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="IL">Illinois</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="OK">Oklahoma</option> <option value="SD">South Dakota</option> <option value="TX">Texas</option> <option value="TN">Tennessee</option> <option value="WI">Wisconsin</option> </optgroup> <optgroup label="Eastern Time Zone"> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="IN">Indiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="OH">Ohio</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WV">West Virginia</option> </optgroup> </select> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <form class="card-box"> 
         <h4 class="header-title m-t-0 m-b-20">Auto Complete</h4> 
         <div class="form-group m-b-30"> 
          <p>Ajax Lookup</p> 
          <p class="text-muted m-b-15 font-14"> Your awesome text goes here </p> 
          <input type="text" name="country" id="autocomplete-ajax" class="form-control"> 
          <input type="text" name="country" id="autocomplete-ajax-x" disabled class="form-control" style="color: #CCC; position: absolute; background: transparent; z-index: 1;display: none;"> 
         </div> 
         <div class="form-group m-b-0"> 
          <p>Local Lookup and Grouping</p> 
          <p class="text-muted m-b-15 font-14"> Your awesome text goes here </p> 
          <input type="text" name="country" id="autocomplete" class="form-control"> 
         </div> 
        </form> 
       </div> 
       <!-- end col --> 
      </div> 
      <!-- end row --> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-20">Tags Input</h4> 
         <p>Input Tags</p> 
         <p class="text-muted m-b-20 font-14"> Just add <code>data-role="tagsinput"</code> to your input field to automatically change it to a tags input field. </p> 
         <div class="tags-default"> 
          <input type="text" value="Amsterdam,Washington,Sydney" data-role="tagsinput" placeholder="add tags"> 
         </div> 
         <p class="m-t-30">True multi value</p> 
         <p class="text-muted m-b-20 font-14"> Use a <code>&lt;select multiple /&gt;</code> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <code>&lt;option /&gt;</code> elements will automatically be set as tags. This makes it also possible to create tags containing a comma. </p> 
         <div class="m-b-0"> 
          <select multiple data-role="tagsinput"> <option value="Amsterdam">Amsterdam</option> <option value="Washington">Washington</option> <option value="Sydney">Sydney</option> </select> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-20">Switchery</h4> 
         <p>Basic</p> 
         <p class="text-muted m-b-20 font-14"> Add an attribute <code> data-plugin="switchery" data-color="@colors"</code> to your input element and it will be converted into switch. </p> 
         <div class="switchery-demo"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#039cfd"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#f1b53d"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#ff5d48"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#3db9dc"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#2b3d51"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#9261c6"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#ff7aa3"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#98a6ad"> 
         </div> 
         <p class="m-t-30">Sizes &amp; Secondary color</p> 
         <p class="text-muted m-b-30 font-14"> Add an attribute <code> data-size="small",data-size="large"</code> to your input element and it will be converted into switch. Add an attribute <code> data-color="@color" data-secondary-color="@color"</code> to your input element and it will be converted into switch. </p> 
         <div class="switchery-demo"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#64b0f2" data-size="small"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#ff7aa3"> 
          <input type="checkbox" checked data-plugin="switchery" data-color="#2b3d51" data-size="large"> 
          <input type="checkbox" data-plugin="switchery" data-color="#1bb99a" data-secondary-color="#ff5d48"> 
          <input type="checkbox" data-plugin="switchery" data-color="#9261c6" data-secondary-color="#ff7aa3" checked> 
         </div> 
        </div> 
        <!-- end card-box --> 
       </div> 
       <!-- end col --> 
      </div>
      <!-- end row --> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="card-box"> 
         <h4 class="header-title m-t-0 m-b-20">Bootstrap MaxLength</h4> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class=""> 
            <p>Default usage</p> 
            <p class="text-muted m-b-15 font-14"> The badge will show up by default when the remaining chars are 10 or less: </p> 
            <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig"> 
            <div class="m-t-20"> 
             <p>Threshold value</p> 
             <p class="text-muted m-b-15 font-14"> Do you want the badge to show up when there are 20 chars or less? Use the <code>threshold</code> option: </p> 
             <input type="text" maxlength="25" name="thresholdconfig" class="form-control" id="thresholdconfig"> 
            </div> 
            <div class="m-t-20"> 
             <p>All the options</p> 
             <p class="text-muted m-b-15 font-14"> Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code> option is ignored. </p> 
             <input type="text" class="form-control" maxlength="25" name="alloptions" id="alloptions"> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class=""> 
            <p>Position</p> 
            <p class="text-muted m-b-15 font-14"> All you need to do is specify the <code>placement</code> option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'. </p> 
            <input type="text" class="form-control" maxlength="25" name="placement" id="placement"> 
            <div class="m-t-20"> 
             <p>textareas</p> 
             <p class="text-muted m-b-15 font-14"> Bootstrap maxlength supports textarea as well as inputs. Even on old IE. </p> 
             <textarea id="textarea" class="form-control" maxlength="225" rows="3" placeholder="This textarea has a limit of 225 chars."></textarea> 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- end row --> 
        </div> 
        <!-- end card-box --> 
       </div> 
       <!-- end col --> 
      </div> 
      <!-- end row --> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="card-box"> 
         <h4 class="m-t-0 header-title"><b>Bootstrap TouchSpin</b></h4> 
         <p class="text-muted font-14 m-b-20"> You can limit the number of elements you are allowed to select via the <code> data-max-option </code> attribute. It also works for option groups. </p> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class=""> 
            <form> 
             <div class="form-group"> 
              <p>Using data attributes</p> 
              <input id="demo0" type="text" value="55" name="demo0" data-bts-min="0" data-bts-max="100" data-bts-init-val="" data-bts-step="1" data-bts-decimal="0" data-bts-step-interval="100" data-bts-force-step-divisibility="round" data-bts-step-interval-delay="500" data-bts-prefix="" data-bts-postfix="" data-bts-prefix-extra-class="" data-bts-postfix-extra-class="" data-bts-booster="true" data-bts-boostat="10" data-bts-max-boosted-step="false" data-bts-mousewheel="true" data-bts-button-down-class="btn btn-secondary" data-bts-button-up-class="btn btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>Example with postfix (large)</p> 
              <input id="demo1" type="text" value="55" name="demo1"> 
             </div> 
             <div class="form-group m-b-0"> 
              <p>With prefix </p> 
              <input id="demo2" type="text" value="0" name="demo2" class=" form-control"> 
             </div> 
            </form> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class=""> 
            <form> 
             <div class="form-group"> 
              <p>Init with empty value:</p> 
              <input id="demo3" type="text" value="" name="demo3"> 
             </div> 
             <div class="form-group"> 
              <p>Value attribute is not set (applying settings.initval)</p> 
              <input id="demo3_21" type="text" value="" name="demo3_21"> 
             </div> 
             <div class="form-group"> 
              <p>Value is set explicitly to 33 (skipping settings.initval) </p> 
              <input id="demo3_22" type="text" value="33" name="demo3_22"> 
             </div> 
            </form> 
           </div> 
          </div> 
         </div> 
         <!-- end row --> 
        </div> 
       </div> 
       <!-- end col --> 
      </div> 
      <!-- end row --> 
      <!-- Bootstrap-select --> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="card-box"> 
         <h4 class="m-t-0 header-title"><b>Bootstrap-select</b></h4> 
         <div class="row"> 
          <div class="col-md-4"> 
           <div class="demo-box"> 
            <p class="text-muted m-b-15 font-14"> Create your <code> &lt;select&gt; </code> with the <code> .selectpicker </code> class. </p> 
            <select class="selectpicker" data-style="btn-custom"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> It also works with option groups: </p> 
            <select class="selectpicker" data-style="btn-secondary"> <optgroup label="Picnic"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </optgroup> <optgroup label="Camping"> <option>Tent</option> <option>Flashlight</option> <option>Toilet Paper</option> </optgroup> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> You can also show the tick icon on single <code>select</code> with the <code>show-tick</code> class: </p> 
            <select class="selectpicker show-tick" data-style="btn-success"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> And with multiple selects: </p> 
            <select class="selectpicker" multiple data-style="btn-secondary"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> You can limit the number of elements you are allowed to select via the <code> data-max-option </code> attribute. It also works for option groups. </p> 
            <select class="selectpicker m-b-0" multiple data-max-options="2" data-style="btn-pink"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="demo-box"> 
            <p class="text-muted m-b-15 font-14"> You can limit the number of elements you are allowed to select via the <code> data-max-option </code> attribute. It also works for option groups. </p> 
            <select class="selectpicker" data-style="btn-secondary btn-rounded"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" data-style="btn-primary btn-bordered"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" data-style="btn-info"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" data-style="btn-warning"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" data-style="btn-danger btn-bordered"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" data-style="btn-purple"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> Add an icon to an option or optgroup with the <code>data-icon</code> attribute: </p> 
            <select class="selectpicker m-b-0" data-style="btn-secondary"> <option data-icon="mdi mdi-account-circle text-primary">Mustard</option> <option data-icon="mdi mdi-airplane">Ketchup</option> <option data-icon="mdi mdi-airplay">Relish</option> <option data-icon="mdi mdi-adjust">Mayonnaise</option> <option data-icon="mdi mdi-apple">Barbecue Sauce</option> </select> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="demo-box"> 
            <p class="text-muted m-b-15 font-14"> You can add a search input by passing <code>data-live-search="true"</code> attribute: </p> 
            <select class="selectpicker" data-live-search="true" data-style="btn-custom"> <option>Hot Dog, Fries and a Soda</option> <option>Burger, Shake and a Smile</option> <option>Sugar, Spice and all things nice</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> You can also use the <code> title</code> attribute as an alternative to display when the option is selected: </p> 
            <select class="selectpicker" data-live-search="true" data-style="btn-secondary"> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 2">Burger, Shake and a Smile</option> <option title="Combo 3">Sugar, Spice and all things nice</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> Using the <code>data-selected-text-format</code> attribute on a <code>multiple select</code> you can specify how the selection is displayed. </p> 
            <select class="selectpicker" multiple data-selected-text-format="count" data-style="btn-secondary"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
            <br> 
            <br> 
            <select class="selectpicker" multiple data-selected-text-format="count > 3" data-style="btn-secondary"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> 
            <p class="text-muted m-b-15 m-t-30 font-14"> Add the <code>disabled</code> attribute to the select to apply the <code>disabled</code> class. </p> 
            <select class="selectpicker m-b-0" data-style="btn-info" disabled> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 
           </div> 
          </div> 
         </div> 
         <!-- end row --> 
        </div> 
        <!-- ed card-box --> 
       </div> 
       <!-- end col --> 
      </div> 
      <!-- end row --> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="card-box"> 
         <h4 class="m-t-0 header-title"><b>Bootstrap FileStyle</b></h4> 
         <p class="text-muted m-b-15 font-14"> You can limit the number of elements you are allowed to select via the <code> data-max-option </code> attribute. It also works for option groups. </p> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="demo-box"> 
            <form> 
             <div class="form-group"> 
              <p>Default file input</p> 
              <input type="file" class="filestyle" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>File style without input</p> 
              <input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>File style without icon</p> 
              <input type="file" class="filestyle" data-icon="false" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>File style with custom text</p> 
              <input type="file" class="filestyle" data-buttontext="Select file" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group m-b-0"> 
              <p>File style with button style</p> 
              <input type="file" class="filestyle" data-buttonname="btn-primary"> 
             </div> 
            </form> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="demo-box"> 
            <form> 
             <div class="form-group"> 
              <p>Small file style</p> 
              <input type="file" class="filestyle" data-size="sm" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>File style with custom icon</p> 
              <input type="file" class="filestyle" data-iconname="fa fa-cloud-upload" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>Disable file style</p> 
              <input type="file" class="filestyle" data-disabled="true" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group"> 
              <p>File style before button</p> 
              <input type="file" class="filestyle" data-buttonbefore="true" data-buttonname="btn-secondary"> 
             </div> 
             <div class="form-group m-b-0"> 
              <p>File style placeholder</p> 
              <input type="file" class="filestyle" data-placeholder="No file" data-buttonname="btn-secondary"> 
             </div> 
            </form> 
           </div> 
          </div> 
         </div> 
         <!-- end row --> 
        </div> 
        <!-- end card-box --> 
       </div> 
       <!-- end col --> 
      </div> 
      <!-- end row --> 
     </div> 
     <!-- container --> 
    </div> 
    <!-- content --> 
    <footer class="footer text-right">
      2017 © Adminox. - Coderthemes.com 
    </footer> 
   </div> 
   <!-- ============================================================== --> 
   <!-- End Right content here --> 
   <!-- ============================================================== --> 
  </div> 
  <!-- END wrapper --> 
  <!-- jQuery  --> 
  <script src="assets/js/jquery.min.js"></script> 
  <script src="assets/js/tether.min.js"></script>
  <!-- Tether for Bootstrap --> 
  <script src="assets/js/bootstrap.min.js"></script> 
  <script src="assets/js/metisMenu.min.js"></script> 
  <script src="assets/js/waves.js"></script> 
  <script src="assets/js/jquery.slimscroll.js"></script> 
  <script src="../plugins/switchery/switchery.min.js"></script> 
  <script src="../plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script> 
  <script src="../plugins/select2/js/select2.min.js" type="text/javascript"></script> 
  <script src="../plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript"></script> 
  <script src="../plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js" type="text/javascript"></script> 
  <script src="../plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script> 
  <script src="../plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script> 
  <script type="text/javascript" src="../plugins/autocomplete/jquery.mockjax.js"></script> 
  <script type="text/javascript" src="../plugins/autocomplete/jquery.autocomplete.min.js"></script> 
  <script type="text/javascript" src="../plugins/autocomplete/countries.js"></script> 
  <script type="text/javascript" src="assets/pages/jquery.autocomplete.init.js"></script> 
  <!-- Init Js file --> 
  <script type="text/javascript" src="assets/pages/jquery.form-advanced.init.js"></script> 
  <!-- App js --> 
  <script src="assets/js/jquery.core.js"></script> 
  <script src="assets/js/jquery.app.js"></script>  
 </body>
</html>